<template>
  <div class="management-spec">
    <div class="management-spec-header">
      <router-link to="/main/xingzheng/gudingzichan" style="color: #000"
        ><i class="el-icon-arrow-left">返回</i></router-link
      >
      <span style="float: right" @click="printForm"
        ><i class="el-icon-printer">打印</i></span
      >
    </div>
    <h2 style="text-align: center">深圳市艾美思普科技有限公司</h2>
    <h3 style="text-align: center">设备仪器管理规范</h3>
    <div class="meta-info">
      <p>文件编号：{{ fileNumber }}</p>
      <p>文件版本：{{ fileVersion }}</p>
      <p>编制部门：{{ compileDepartment }}</p>
      <p>生效日期：{{ effectiveDate }}</p>

      <p>批准：<input v-model="approve" /></p>
      <p>审核：<input v-model="review" /></p>
      <p>编制：<input v-model="compile" /></p>
      <!-- <input v-model="approveDate">年<input v-model="reviewDate">月 -->
      <p>日期：<input v-model="compileDate" /></p>
    </div>
    <!-- <el-button @click="addRevision" type="primary" style="margin-bottom: 10px;">新增修订记录</el-button>
        <el-table :data="revisionRecords" border>
            <el-table-column prop="version" label="版本" width="100"></el-table-column>
            <el-table-column prop="effectiveDate" label="生效日期" width="150"></el-table-column>
            <el-table-column prop="revisionContent" label="修订内容摘要" width="300"></el-table-column>
            <el-table-column prop="revisionDepartment" label="修订部门" width="150"></el-table-column>
            <el-table-column prop="revisionPerson" label="修订人" width="100"></el-table-column>
        </el-table> -->
    <el-button @click="addRevision" type="primary" style="margin-bottom: 10px"
      >新增修订记录</el-button
    >
    <el-form v-if="showForm" :model="newRevision" label-width="120px">
      <el-form-item label="版本">
        <el-input v-model="newRevision.version"></el-input>
      </el-form-item>
      <el-form-item label="生效日期">
        <el-date-picker
          v-model="newRevision.effectiveDate"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="修订内容摘要">
        <el-input
          v-model="newRevision.revisionContent"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="修订部门">
        <el-input v-model="newRevision.revisionDepartment"></el-input>
      </el-form-item>
      <el-form-item label="修订人">
        <el-input v-model="newRevision.revisionPerson"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveRevision">保存</el-button>
        <el-button @click="cancelRevision">取消</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="revisionRecords" border>
      <el-table-column
        prop="version"
        label="版本"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="effectiveDate"
        label="生效日期"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="revisionContent"
        label="修订内容摘要"
        width="300"
      ></el-table-column>
      <el-table-column
        prop="revisionDepartment"
        label="修订部门"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="revisionPerson"
        label="修订人"
        width="100"
      ></el-table-column>
    </el-table>
    <p class="warning">使用前请确认是否为最新版本！</p>
    <h3>1 目的：</h3>
    <p>
      明确设备仪器的使用规范，确保人身安全与产品品质，合理利用设备，提高生产效率，延长设备使用寿命。
    </p>
    <h3>2 范围：</h3>
    <p>
      适用于 DIP 事业部所有生产设备及辅助设备（含租赁设备）及检验和试验设备。
    </p>
    <h3>3 职责：</h3>
    <ul>
      <li>3.1 工程部：负责本规范的制定及日常工作中的技术指导。</li>
      <li>3.1 生产部：负责本规范相关设备的日常使用/维护/保管。</li>
      <li>3.1 品质部：负责本规范的监督，环保设备要求的确定。</li>
    </ul>
    <h3>4 定义：</h3>
    <ul>
      <li>4.1 检验和试验设备：为使产品符合确定的要求所用的监视和测量装置。</li>
      <li>
        4.1
        设备：主要指生产经营中除测量和试验设备及工装夹具以外的设备（如加工设备、办公设备、运输设备，不含检验与测量设备）。
      </li>
    </ul>
    <h3>5 内容：</h3>
    <h4>5.1 设备使用：</h4>
    <ul>
      <li>
        5.1.1
        工程部对新购设备进行安装调试，并制定设备操作保养规程。设备操作员必须经过培训并考核合格后才能上岗操作。
      </li>
      <li>5.1.2 设备操作员必须严格按照该设备的操作保养规程作业。</li>
      <li>
        5.1.3 使用过程中出现设备异常应立即关闭电源，通知工程人员进行维修，维修
        OK
        后记录于《设备维修记录》中，当为大修及更换主要部件时要记录在《设备仪器履历卡》内，当《设备仪器履历卡》记满时，可以用《设备维修记录》作为《设备履历卡》附件继续填写。
      </li>
      <li>
        5.1.4 无法维修的设备由工程评估后填写《设备报废申请单》申请报废处理。
      </li>
      <li>
        5.1.5
        检验和试验设备的使用先检查设备，确认设备合格证是否有效，再用已经确认为不良的板卡进行验证是否能够重现不良。
      </li>
    </ul>
    <h4>5.2 设备保养：</h4>
    <ul>
      <li>
        5.2.1 设备操作员必须按时完成设备的各项日常保养项目，品质、工程监督。
      </li>
      <li>5.2.2 每周末按时完成设备的各项周保养项目，工程监督指导。</li>
      <li>5.2.3 每月末按时完成设备的各项月保养项目，工程监督指导。</li>
    </ul>
    <h4>5.3 设备维护：</h4>
    <ul>
      <li>5.3.1 制定设备维护保养计划。</li>
      <li>5.3.2 监督指导各设备操作员正确作业。</li>
      <li>5.3.2 组织员工上岗前的操作技能培训。</li>
      <li>5.3.4 定期每周一次对各部位进行点检。</li>
      <li>5.3.5 对设备存在的故障隐患及时维修。</li>
      <li>5.3.6 加强设备操作员对设备的爱护意识。</li>
    </ul>
    <h4>5.4 设备保管：</h4>
    <ul>
      <li>
        5.4.1
        所有机器设备建立档案《机器设备一览表》、《设备仪器履历卡》、《设备验收记录》、《资产报废注销申请单》。
      </li>
      <li>
        5.4.2
        设备定点摆放安装后，不得随意搬迁；现场使用人员做到环保设备与非环保设备不能放在同一区域或进行有效标识隔离。
      </li>
      <li>5.4.3 5.4.3 设备使用单位应妥善保管好设备，维持设备的完整、可用。</li>
      <li>5.4.4 设备人为损坏应由该设备使用单位承担责任。</li>
    </ul>
    <h4>5.5 其它要求：</h4>
    <ul>
      <li>5.5.1 设备管理人员操作人员应具备相关的消防安全知识。</li>
      <li>5.5.2 设备操作员应有强烈的品质意识及环保意识。</li>
    </ul>
    <h4>5.6 租赁设备：</h4>
    <ul>
      <li>
        5.5.1凡租赁设备，预计使用时间在一个月内的，只需要验证设备正常,贴合格证即可使用，不需要制作《设备仪器履历卡》、《设备验收记录》及记入《机器设备一览表》或《仪器一览表》。
      </li>
    </ul>
    <h3>6 附件、相关文件及表单：</h3>
    <h4>6.1 相关文件：</h4>
    <ul>
      <li>6.1.1 《设备仪器管理流程》</li>
    </ul>
    <h4>6.2 相关表单：</h4>
    <ul>
      <li>6.2.1 《机器设备一览表》</li>
      <li>6.2.2 《设备验收记录》</li>
      <li>6.2.3 《资产报废注销申请单》</li>
      <li>6.2.4 《设备点检保养记录表》</li>
      <li>6.2.5 《设备维修申请单》</li>
      <li>6.2.6 《设备仪器履历卡》</li>
      <li>6.2.7 《仪器一览表》</li>
      <li>6.2.8 《设备维修记录》</li>
      <li>6.2.9 《 年度机器设备保养计划》</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileNumber: "WI-Q-RC-59",
      fileVersion: "C/1",
      compileDepartment: "DIP工程部",
      effectiveDate: "2016-5-30",
      approve: "",
      review: "",
      compile: "董孝立",
      approveDate: "",
      reviewDate: "",
      compileDate: "2016年5月10日",
      revisionRecords: [
        {
          version: "C/1",
          effectiveDate: "2016-5-30",
          revisionContent: "公司架构调整，修改部门编号及名称",
          revisionDepartment: "品质管理部",
          revisionPerson: "董孝立",
        },
      ],
      newRevision: {
        version: "",
        effectiveDate: "",
        revisionContent: "",
        revisionDepartment: "",
        revisionPerson: "",
      },
      showForm: false,
    };
  },
  created() {
    const savedRecords = localStorage.getItem("revisionRecords");
    if (savedRecords) {
      this.revisionRecords = JSON.parse(savedRecords);
    } else {
      this.revisionRecords = [
        {
          version: "C/1",
          effectiveDate: "2016-5-30",
          revisionContent: "公司架构调整，修改部门编号及名称",
          revisionDepartment: "品质管理部",
          revisionPerson: "董孝立",
        },
      ];
    }
  },
  methods: {
    addRevision() {
      this.showForm = true;
    },
    saveRevision() {
      this.revisionRecords.push({ ...this.newRevision });

      // 更新文件版本和生效日期
      this.fileVersion = this.newRevision.version;
      this.effectiveDate = this.newRevision.effectiveDate;

      localStorage.setItem(
        "revisionRecords",
        JSON.stringify(this.revisionRecords)
      );

      this.newRevision = {
        version: "",
        effectiveDate: "",
        revisionContent: "",
        revisionDepartment: "",
        revisionPerson: "",
      };
      this.showForm = false;
    },
    cancelRevision() {
      this.newRevision = {
        version: "",
        effectiveDate: "",
        revisionContent: "",
        revisionDepartment: "",
        revisionPerson: "",
      };
      this.showForm = false;
    },
    printForm() {
      window.print();
    },
  },
};
</script>

<style scoped lang="scss">
.management-spec {
  padding: 20px;
  font-family: "宋体";
  text-align: left;
  width: 212mm;
  margin: auto;
  line-height: 30px;
}

.warning {
  color: red;
  margin-top: 10px;
  font-size: 18px;
  text-align: center;
}

.meta-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin-left: 0px;
    text-align: left;
  }
}

ul li {
  list-style: none;
  margin-left: 50px;
}

p {
  margin-left: 50px;
}

h4 {
  margin-left: 20px;
}
@media print {
    .management-spec-header{
        display: none;
    }
}
</style>